$themeColor:var(--themeColor);
$selectedColor: var(--selectedColor);
$borderColor:#f1e8e8;
$shadowColor:#0000001a;
$shadow:0 0 4px $shadowColor;

.Fg-Blue {
  color: $themeColor;
}

@mixin Fg-drop-here() {
  background: #f2f8ff;
  // border: 1px dashed #ccc;
}
.Fg-form-item {
  overflow: hidden;
}
.drawing-board {
  .Fg-form-item {
    // background-color: #fff;
    .el-form-item {
      background: transparent !important; 
    }
    .el-input__inner {
      // background: transparent;
    }
  }
  .el-input__inner,.el-textarea__inner {
    background: transparent;
  }

 
  .Fg-active {
    position: relative;
    border: 2px solid $themeColor !important;
  }
  height: 100%;
  // min-height: 60px;
  position: relative;
  .sortable-ghost {
    position: relative;
    display: block;
    overflow: hidden;
    &::before {
      content: " ";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 3px;
      background: $themeColor;
      z-index: 2;
    }
  }
  .components-item.sortable-ghost {
    width: 100%;
    height: 60px;
    // background-color: $selectedColor;
  }
  .drawing-item-edit:last-child{
    margin-bottom: 0;
  }
}
.drawing-item-edit{
  position: relative;
  cursor: move;
  // margin-bottom: 16px;
  padding: 8px;
  &.unfocus-bordered:not(.active-from-item) > div:first-child {
    border: 1px dashed #ccc;
  }
  .el-form-item{
    // padding: 12px 10px;
    margin-bottom: 0;
    background-color: #fff;
  }
  .Fg-table-container {
    td {
      height: 60px;
      box-sizing: border-box;
      background-color: #f2f8ff;
      >.Fg-tips {
        >.Fg-tips-content {
          border-width: 0;
        }
      }
    }
  }
  .Fg-com-mini, .Fg-com-small,.Fg-com-medium {
    margin-bottom: 0;
  }

  .form-row-container {
    padding: 8px;
  }
  .Fg-table-container {
    .form-row-container {
      padding: 0;
    }
  }

  .Fg-tabs-container {
    .el-tabs__content {
      @include Fg-drop-here();
    }
    &.el-tabs--border-card>.el-tabs__content {
      padding: 0;
    }
  }
  .Fg-card {
    .el-card__body {
      @include Fg-drop-here();
      padding: 0;
    }
  }
  
  .Fg-collapse {
    .el-collapse-item__content {
      @include Fg-drop-here();
      padding-bottom: 0;
    }
  }
  .Fg-sub {
    .Fg-sub-item {
      @include Fg-drop-here();
    }
  }
  .Fg-steps {
    .Fg-steps--content {
      @include Fg-drop-here();
    }
  }
  .Fg-tips {
    position: relative;
    .Fg-tips-content {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
}

.form-row-container {
  font-size: 14px;
  input,textarea {
    // background: transparent;
  }
  .el-form-item__label {
    // color: inherit;
    // font-size: inherit;
    // text-decoration-line: inherit;
    // text-decoration-color:inherit;
    // text-decoration-style:inherit;
  }
}
.drawing-border {
  @include Fg-drop-here()
}
.drawing-row-item{
  position: relative;
  cursor: move;
  box-sizing: border-box;
  border: 1px dashed #ccc;
  // border-radius: 3px;
  .drag-wrapper{
    min-height: 80px;
  }
  .component-name{
    position: absolute;
    top: 0;
    left: 10px;
    font-size: 12px;
    color: #bbb;
    display: inline-block;
    padding: 0 6px;
  }
  .el-input-number,
  .el-autocomplete {
    width: 100%;
  }

}

.drawing-item-hover {
  &:hover {
    border: 1px dashed $themeColor ;
  } 
}

.drawing-item-edit, .drawing-row-item{
  .Fg-form-item--topIcon {
    position: absolute;
    top: 5px;
    left:5px;
    z-index: 1;
  }
  .Fg-form-item--icon {
    position: absolute;
    // top: -10px;
    // right: 24px;
    bottom: 1px;
    right: 1px;
  }
}

.Fg-bottom-0 {
  margin-bottom: 0;
}

.Fg-com-mini {
  margin-bottom: 18px;
}

.Fg-com-small {
  margin-bottom: 18px;
}
.Fg-com-medium {
  margin-bottom: 22px;
}

.Fg-cursor {
  cursor: pointer;
}

